<template>
	<view class="page_content">
		<view class="page_step">
			<uni-section>
				<uni-steps :options="list1" :active="active" activeColor="#3cb371"/>
			</uni-section>
		</view>
		<view>
			<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger" />
		</view>
		<uni-section title="收货人信息" type="line" class="page_shou">
			<view>
				<!-- 收货人信息 -->
				<uni-forms ref="shForm" :rules="rules" :modelValue="shFormData">
					<uni-forms-item label="到达批发市场" required name="scName">
						<uni-combox :candidates="scdates" placeholder="请选择市场" v-model="shFormData.scName" />
					</uni-forms-item>
					<uni-forms-item label="收货人姓名" required name="shName">
						<uni-easyinput v-model="shFormData.shName" placeholder="请输入收货人姓名" />
					</uni-forms-item>
					<uni-forms-item type="number" label="收货人手机号" required name="shPhone">
						<uni-easyinput v-model="shFormData.shPhone" placeholder="请输入收货人手机号" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section>
		<uni-section title="司机信息" type="line" class="page_shou">
			<view>
				<!-- 司机信息 -->
				<uni-forms ref="sjForm" :rules="rules" :modelValue="sjFormData">
					<uni-forms-item label="车牌号" required name="carNumber" @tap="hidePlateKeyboard">
						<plate-number ref="plateNumber" @input="binddata('carNumber',$event.detail.value)"/>
					</uni-forms-item>
					<uni-forms-item label="司机姓名" required name="sjName">
						<uni-easyinput v-model="sjFormData.sjName" placeholder="请输入司机姓名" />
					</uni-forms-item>
					<uni-forms-item type="number" label="司机手机号" required name="sjPhone">
						<uni-easyinput v-model="sjFormData.sjPhone" placeholder="请输入司机手机号" />
					</uni-forms-item>
					<uni-forms-item label="司机身份证" type="idcard" required name="idCard">
						<uni-easyinput v-model="sjFormData.idCard" placeholder="请输入司机身份证" />
					</uni-forms-item>
					<uni-forms-item label="计划发货日" required name="plannedDeliveryDate">
						<uni-datetime-picker type="date" return-type="string"
							v-model="sjFormData.plannedDeliveryDate" />
					</uni-forms-item>
					<uni-forms-item label="计划到达日" required name="plannedArrivalDate">
						<uni-datetime-picker type="date" return-type="string" v-model="sjFormData.plannedArrivalDate" />
					</uni-forms-item>
					<uni-forms-item label="到达时间段" required name="arrivalTimePeriod">
						<uni-combox :candidates="timedates" placeholder="请选择时间段"
							v-model="sjFormData.arrivalTimePeriod" />
					</uni-forms-item>
					<view>
						<label style="font-size: 14px;color: #8F939C;">行驶证，驾乘人员健康码，驾乘人员行程码，</label>
						<label style="font-size: 14px;color: #E43D33;margin-bottom: auto;">48小时核酸证明等</label>
					</view>
					<uni-forms-item required name="imageValue">
						<uni-file-picker v-model="sjFormData.imageValue" fileMediatype="image" mode="grid" :limit="6"
							@select="select" @progress="progress" @success="success" @fail="fail" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section>
		<button type="primary" size="mini" @click="change('shForm','sjForm')">下一步</button>
	</view>

</template>

<script>
	import PlateNumber from '@/components/plate/plate-number.vue';
	export default {
		components: {
			PlateNumber,
		},
		data() {
			return {
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#f0f0f0',
					selectedColor: '#3cb371',
					buttonColor: '#3cb371',
					iconColor: '#fff'
				},
				content: [{
						iconPath: '/static/main.png',
						selectedIconPath: '/static/main.png',
						text: '我的',
						active: false
					},
					{
						iconPath: '/static/remarks.png',
						selectedIconPath: '/static/remarks.png',
						text: '首页',
						active: false
					}
				],
				active: 0,
				timedates: ['0:00-05:59', '06:00-11:59', '12:00-17:59', '18:00-24:00'],
				scdates: ['市场1', '市场2', '市场3'],
				list1: [{
					title: '运输信息'
				}, {
					title: '商品信息'
				}, {
					title: '完成'
				}],
				//收货人信息
				shFormData: {
					scName: '',
					shName: '',
					shPhone: ''
				},
				//司机信息
				sjFormData: {
					carNumber: '',
					sjName: '',
					sjPhone: '',
					idCard: '',
					plannedDeliveryDate: '',
					plannedArrivalDate: '',
					arrivalTimePeriod: '',
					imageValue: []
				},
				rules: {
					// 对scName字段进行必填验证
					scName: {
						rules: [{
							required: true,
							errorMessage: '请选择市场',
						}],
						validateTrigger: 'bind'
					}, // 对scName字段进行必填验证
					shName: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 2,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					shPhone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '手机号长度为{minLength}个字符',
							}
						]
					},
					imageValue: {
						rules: [
							{
								required: false,
								errorMessage: '请上传相关证明',
							}
						]
					}
				}
			}
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		methods: {
			change(ref1, ref2) {
				uni.showLoading({
					title: '加载中'
				});
				this.$refs[ref1].validate().then(res1 => {
					this.$refs[ref2].validate().then(res2 => {
						console.log("res1", res1);
						uni.hideLoading();
						let plate = this.$refs.plateNumber.getPlate();
						console.log("plate", plate);
						if (plate == "") {
							uni.showToast({
								title: '车牌号不能为空!',
								icon: 'none'
							})
						} else {
							res2.carNumber = plate;
							console.log('res2', res2);
							let res = Object.assign(res1, res2);
							console.log('res', JSON.stringify(res));
							uni.navigateTo({
								url: 'gs-step2?res=' + encodeURIComponent(JSON.stringify(res))
							})
						}

					}).catch(err => {
						uni.hideLoading();
						console.log('err', err);
					})
				}).catch(err => {
					uni.hideLoading();
					console.log('err', err);
				})
			},
			hidePlateKeyboard() {
				if (this.$refs.plateNumber) {
					this.$refs.plateNumber.hidePlateKeyboard();
				}
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			trigger(e) {
				console.log(e)
				// this.content[e.index].active = !e.item.active
				uni.showModal({
					title: '提示',
					content: `确定跳转到${e.item.text}?`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							if(e.item.text == '首页'){
								uni.switchTab({
									url: '/pages/index/index'
								});
							}else if(e.item.text == '我的'){
								uni.switchTab({
									url: '/pages/profile/profile'
								});
							}
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background-color: #f0f0f0;
	}

	.page_content {
		button {
			width: 96%;
			height: 35px;
			margin-top: 10px;
			margin-left: 10px;
			margin-right: 10px;
			margin-bottom: 40px;
			background-color: #3cb371;
		}
	}

	.page_step {
		border: 2rpx solid #F2F2F2;
		border-radius: 10rpx;
		padding: 10px;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		background-color: #ffffff;
		box-shadow: 0 0 15px #cccccc;
	}

	.page_shou {
		border: 2rpx solid #F2F2F2;
		border-radius: 10rpx;
		padding: 10px;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		background-color: #ffffff;
		box-shadow: 0 0 15px #cccccc;
	}
</style>
